<template>
  <el-container>
    <el-header>
      <header-nav />
      <header-search />
    </el-header>
    <el-main>
      <quick-menus v-if="!isMobile" />
      <web-hot-content />
      <web-page-content />
      <footer-box v-if="isMobile" />
    </el-main>
    <el-footer>
      <footer-box v-if="!isMobile" />
      <tab-bar v-else />
    </el-footer>
    <el-backtop :bottom="100" />
  </el-container>
</template>

<script lang="ts" setup>
import FooterBox from '@/components/common/FooterBox.vue'
import HeaderNav from '@/components/common/HeaderNav.vue'
import TabBar from '@/components/header-nav/TabBar.vue'
import HeaderSearch from '@/components/common/HeaderSearch.vue'
import QuickMenus from '@/components/common/QuickMenus.vue'
import WebHotContent from '@/components/web/WebHotContent.vue'
import WebPageContent from '@/components/web/WebPageContent.vue'

const isMobile = window.isMobile
</script>

<style lang="scss" scoped>
.el-container {
  background-color: #fbfbfd;
  height: 100vh;
  display: unset;

  .el-header {
    padding: 0;
    height: 120px;
    position: fixed;
    top: 0;
    z-index: 2;
    width: 100%;
  }

  .el-main {
    margin-top: 150px;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 980px;
    overflow: unset;
  }

  .el-footer {
    height: 30px;
    line-height: 30px;
    text-align: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    padding: 0;
  }
}

@media screen and (max-width: 480px) {
  .el-container {
    .el-main {
      width: 100%;
      padding: 0px;
      margin-top: 155px;
      margin-bottom: 60px;
    }
    .el-footer {
      height: 60px;
      line-height: 60px;
    }
  }
}
</style>
